<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content='text/html; charset=UTF-8'/>
    <link rel="stylesheet" href="syntax-highlighter-1.5.1/css/SyntaxHighlighter.css" type="text/css"/>
    <link rel="stylesheet" href="../src/jplex/components/menu/assets/menu.css" type="text/css"/>

    <script src="../src/jPlex.js" type="text/javascript" charset="utf-8"></script>
    <script src="./syntax-highlighter-1.5.1/syntax-highlighter.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           body {
            font-family: "Trebuchet MS", sans-serif;
            font-size:0.9em;
        }

        div#menubar {
            top: 0;
            left: 0;
            position: absolute;
        }
       </style>
</head>
<body>
<input type="button" value="Menu hihi" id="test" class="jplex-menu"/>


<script type="text/javascript">
    jPlex.include('jplex.components.Menu');

    var data = [{
            name: "Slideshow",
            icon: "./global/img/sheet2.png",
            shortcut: {
                key: Event.Key.M,
                ctrl: true,
                text: "Ctrl + M"
            }}, {
            name: "Form",
            shortcut: {
                key: Event.Key.D,
                ctrl: true,
                text: "Ctrl + D"
            }
        }, {
            name: "Download jPlex",
            items: [{
                name: "Pangolin Compressed"
            }, {name: "Pangolin Source"}]
        }, {
            name: "Close",
            shortcut: {
                key: Event.Key.W,
                ctrl: true,
                text: "Ctrl + W"
            }
        }];
    
    var c = new Menu('test-menu', data, {
        source:'test'
    });
    $('test').observe('click', function() {
        if(c.component.visible()) {
            c.hide();
        } else {
            c.show();
        }
    });

</script>
</body>
</html>